React Native 界面跳转

发表于 | 分类于

先放上 app.js 中的主要代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import List from './ListView';
const defaultRoute = {
  component: List,
  name:'List'
};
class RnDemo extends Component {
  _renderScene(route, navigator) {
    let Component = route.component;
    return (
      <Component {...route.params} navigator={navigator} />
    );
  }
  render() {
    return (
      <Navigator
        initialRoute={defaultRoute}
        renderScene={this._renderScene}/>
    );
  }
}

  • 第一行是引用了一个文件，listview中就是我们打开app想要展示的第一个界面的内容，那么现在的 List 就是这个界面的组件的名字，详细后面再说，我们继续看

  • 第三行我们定义了一个对象，这个对象中有两个属性，name和component，component我们用 List 去赋值，这是个什么东西呢？ 其实，这里的component也就是 List 中的class就是我们将要在下面的component中实例化的组件

  • 我们直接看17行，这是一个Navigator标签，他就是我们的导航器标签，我们看他的属性，initialRoute 是什么呢，其实这里才是设置app打开要显示的默认界面是什么，所以我们就可以把上面的 defaultRoute 放进去了

  • 19行这个就是很重要的了，reanderScene 是什么呢，我们发现给他赋值的是一个叫renderScene的方法，那我们回去看第9行。我们发现这里有两个参数route、 navigator，这又是什么鬼呢，其实route里就是我们上面传递的name和component这两个货，也就是我们将要在navigator里面push的东西，navigator是一个Navigator的对象，那我们在看函数里面，第10行，我们取出router里面的component，根据上面我们知道，这个component其实就是我们引用的ListView里面的那个class，所以下面我们可以用component生成一个标签，其实就是实例化了一个ListView里面的类，我们再来看属性，…route.params 其实就是给下一个界面传参，这个我们下面介绍。然后navigator作为props传递给了这个component，这样下一个界面就可以使用这个navigator来进行界面返回等其他操作了

下面我们看一下ListView里面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import Detail from './Detail';
class List extends Component {
  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    var list = [];
    for (var i = 0; i < 20; i++) {
      list[i]='listItem'+i;
    }
    this.state = {
      dataSource: ds.cloneWithRows(list),
    };
  }
  itemClick(e, dataData){
      this.props.navigator.push({
  			name: 'Detail',
  			component: Detail,
            params: {
                        data: dataData
                    }
      })
  }
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) =>
            <TouchableHighlight onPress={(event) => this.itemClick(event, rowData)} underlayColor='lightgray'>
              <View style={style.tableItem} >
                  <View ><Image style={style.img} source={require('../imgs/img.jpg')}></Image></View>
                  <View ><Text style={style.title}>{rowData}</Text></View>
              </View>
            </TouchableHighlight >
        }
      />
    );
  }
}
export default List;

我们就看一下主要的吧，在这里我定义了一个List的组件，并通过export暴露出去，这样在 app.js 我们就可以使用他来实例化标签了

另一个重要的地方是16行，由于这个界面是一个list列表，所以 我就定义了一个 itemClick 方法，去响应每一个item的点击
由于我们之前吧把navigator对象作为组件的属性传递下来了，所以我们这里当然就可以使用 this.props.navigator 来获取到他，并进行界面跳转操作，在这里我们 push 一个新界面 component 就是我们我们要打开的界面的组件类，然后我们其实想要让下面的界面知道我是点击那个item进入的呀，所以我想把item的内容当做参数传递下去，！！！重点来了，可以发现我这里写了一个叫 params 的对象在这个对象里面我写入了我要传递的数据，那为什么写到这里就会传递下去呢？ 如果你还没忘的话，其实我们在上面已经写了

1
2
3
4
5
6
_renderScene(route, navigator) {
   let Component = route.component;
   return (
     <Component {...route.params} navigator={navigator} />
   );
 }

就是这里，app.js 中我们已经设置了把路由中的params拿出来作为新组件的属性，这样我们就可以在新组件里面通过 this.props 获取了，下面我们去detail中看一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Detail extends React.Component {
	constructor(props){
	    super(props);
		this.state = {
			data : this.props.data,
		};
	}
    BackClick(){
        const { navigator } = this.props;
        if(navigator) {
            navigator.pop();
        }
    }
	render() {
		return (
			<View >
        <TouchableHighlight onPress={(event) => this.BackClick(event)} underlayColor='lightgray'>
				    <Text>{this.state.data}</Text>
        </TouchableHighlight>
			</View>
		);
	}
}
export default Detail;

刚刚已经介绍了，在这里我们可以通过this.props去获取上一个界面传递下来的数据

我们再来看一下界面返回，第九行，其实就是获取到navigator后，如果navigator存在就pop()；这样就可以成功返回上一个界面了

其实，做界面跳转还可以使用 React-Router 等，这个我们下回再介绍吧^-^